<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <link rel="stylesheet" type="text/css" href="../../css/defaultcss.css" />
    <link rel="stylesheet" type="text/css" href="../../css/amazeui.min.css" />
    <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
    <script src='../../js/amazeui.min.js'></script>
    <script src='../../js/flex.js'></script>
    <script src='../../layer/layer.js'></script>
    <script src='../../js/index.js'></script>
    <link rel="stylesheet" href="../../css/weui.min.css">
    <link rel="stylesheet" href="../../css/css/stylesheets/index.css">

</head>

<body>
    <header>
        <div class="goBack">
            <img src="../../img/base/back.png" alt="返回">
        </div>
        <span class="title"> 公益诉讼 </span>
    </header>
    <div class="content  lawsuit_form">
        <div class="top_tips">
            <span>
                温馨提示：每人每日可提交两次信访申请，请核实清楚！
            </span>
        </div>
        <form id="fform">
            <ul class="form_ul">
                <li>
                    <label for="">姓名</label>
                    <input type="text" name="litName" value="" id="litName" placeholder="请输入姓名">
                </li>
                <li>
                    <label for="">手机号</label>
                    <input type="text" name="litMobile" value="" id="litMobile" placeholder="请输入手机号" required>
                </li>
                <li class="type am-form-group">
                    <label for="">线索类型</label>
                    <select data-am-selected required name='litType' id="litType">
                        <option value="1">国土资源</option>
                        <option value="2" >环境保护</option>
                        <option value="3" >食药安全</option>
                        <option value="4" >国有财产</option>
                        <option value="5" >工商地税</option>
                        <option value="6" >住建</option>
                        <option value="7" >其他</option>
                    </select>
                </li>
                <li class="type am-form-group">
                    <label for="contractType">线索名称</label>
                    <input type="text" name="title" value="" id="title" placeholder="请输入线索名称" required>
                </li>
                <li class="tips">
                    <textarea name="content" id="content" cols="30" rows="10" placeholder="请详细描述相关线索"></textarea>
                </li>
                <li class="other1">
                    <div class="icon">
                        <i><img src="../../img/lawsuit/map.png" alt=""></i><span>所在位置自动定位或者手动输入</span>
                    </div>
                    <div id="time">
                    </div>
                </li>
                <li class="img_box" id="img_box">
                </li>
                <li class="img_box" id="video_input">
                    <div class="img" id="img_4">
                        <img src="../../img/lawsuit/video.png" alt="">
                        <input type="file" id="file4" name="litfile4" />
                    </div>
                </li>
                <li class="video" id="video">
                    <video width="100%" height="100%" controls id="video_box" preload="meta">
                    </video>
                    <i>
                        <img src="../../img/lawsuit/delete.png" alt="">
                    </i>
                </li>
            </ul>
        </form>
        <div class="submitBtn active">
            <button class="button" id="submit">
                提交申请
            </button>
        </div>
    </div>
    <div class="am-modal am-modal-alert radiusModal" tabindex="-1" id="lawsuitModal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">温馨提示</div>
            <div class="am-modal-bd">
                所提线索已提交
                </br>请等待反馈!
            </div>
            <div class="am-modal-footer">
                <a href='./mine_clue.html' class="am-modal-btn">确定</a>
            </div>
        </div>
    </div>
</body>

</html>

<script type="text/javascript ">
    var litType = $("#litType").val();
    $("#litType").change(function () {
        litType = $("#litType").val();
    });
    //litType  线索类型   1.国土资源 2.环境保护；3.食药安全；4.国有财产；5.工商地税；6.住建；7.其他
    $("#submit").bind('click', function () {
        var isPhoneNum = /^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/; // 手机
        var litName = $("#litName").val();
        var litMobile = $("#litMobile").val();
        var title = $('#title').val();
        var content = $('#content').val();
        if (litName == "") {
            layer.open({
                title: '提示',
                content: "姓名不能为空！",
                btn: ['确定'],
            });
            return false;
        } else if (litMobile == "") {
            layer.open({
                title: '提示',
                content: "手机号不能为空！",
                btn: ['确定'],
            });
            return false;
        } else if (!isPhoneNum.test(litMobile)) {
            layer.open({
                title: '提示',
                content: "手机号格式有误！",
                btn: ['确定'],
            });
            return false;
        } else if (title == '') {
            layer.open({
                title: '提示',
                content: "线索名称不能为空！",
                btn: ['确定'],
            });
            return false;
        } else if (content == "") {
            layer.open({
                title: '提示',
                content: "相关线索不能为空！",
                btn: ['确定'],
            });
            return false;
        }

        var imgArr = [];
        var form = new FormData($('#fform')[0]);
        console.log(form.get('litfile1'))
        HYIP.ajax({
            url: '/litigation/addLitigation.action',
            type: 'post',
            processData: false,
            data: form
        }, function (data) {
            $("#lawsuitModal").modal('open');
        });
        return false;
    })

    $('.goBack').bind('click', function () {
        window.history.back()
    })

    $(function () {
        var img_msg = '';
        var addNumArr = [1, 2, 3]; //file的id名字（跟后台对应）
        var isLast = false; //是否最后一个
        var addImg = function (num) {
            //添加上传图片按钮
            img_msg = '<div class="img">                                            ' +
                '    <img src="../../img/lawsuit/img.png" alt="">             ' +
                '    <input type="file" data-id="' + num + '" id="file' + num + '" name="litfile' +
                num +
                '" />         ' +
                '    <i>                                                      ' +
                '        <img src="../../img/lawsuit/delete.png" alt="">      ' +
                '    </i>                                                     ' +
                '    <img src="" alt="" id="apfileimg' + num + '" class="imgFile">      ' +
                '</div>                                                       '
            $('#img_box').append(img_msg);
            addImgFunc();

            //显示图片、上传图片
            $("#img_box .img input").on('change', function () {
                var file = this.files[0];
                var index = $(this).parent().index();
                if (index == 2) {
                    isLast = true;
                }
                // console.log(isLast)
                if (this.files && file) {
                    // console.log(addNumArr)
                    if (addNumArr.length < 3 && addNumArr.length > 0) {
                        addImg(addNumArr[0]);
                        addNumArr.splice(0, 1);
                    }
                }
                // console.log(addNumArr)
            });
            //删除按钮
            $('#img_box .img i').off("click").bind('click', function () {
                var img_id = $(this).siblings('input').data('id');
                addNumArr.push(img_id);
                // console.log(addNumArr)
                //删除对应div
                $(this).parent().remove();
                if (isLast) {
                    //调用添加按钮
                    addImg(addNumArr[0]);
                    addNumArr.splice(0, 1);
                    isLast = false;
                }
            });
        }

        addImg(addNumArr[0]);
        addNumArr.splice(0, 1);

        //初始化时间
        function formatDate(time) {
            var date = new Date(time);
            var year = date.getFullYear(),
                month = date.getMonth() + 1, //月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var addZero = function (num) {
                return num < 10 ? '0' + num : num
            }
            var newTime = year + '-' + addZero(month) + '-' + addZero(day) + '-' + addZero(hour) + ':' +
                addZero(
                    min)
            return newTime;
        }
        $('#time').text(formatDate(new Date()))
    });
</script>